<template>
  <div id="addbooks">
    <div class="head-top">
      <mt-header title="添加书友圈">
        <router-link to="/discover" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button slot="right" @click="addinfo">发布</mt-button>
      </mt-header>
    </div>
    <div class="main">
      <div class="textarea">
        <textarea name="" id="" placeholder="写下这一刻的想法..." v-model="textareaValue"></textarea>
      </div>

      <div v-show="bookds" class="club-nav">
        <img :src="bookinfo.cover" alt="封面" width="72px" height="95px" />
        <div class="club-nav-right">
          <p v-html="bookinfo.title">解忧杂货店</p>
          <p>作者：
            <span v-text="bookinfo.author">东野硅谷</span>
          </p>
          <p>简介：
            <span v-text="bookinfo.describ">现代人内心天天忙这个忙那个</span>
          </p>
        </div>
        <span class="club-nav-del" @click="bookshow">
          <img src="../../../../static/schoolroom/club/shanchu.png" alt="" width="25px" height="25px" />
        </span>
      </div>

      <router-link class="addbook" to='discoverbookslist'>
        <img src="../../../../static/schoolroom/club/book.png" alt="" width="30px" height="30px" />
        <span>书籍</span>

      </router-link>

    </div>

  </div>
</template>

<script>
import baseurl from "./../../../api/baseurl.js";
import { Toast } from "mint-ui";
export default {
  name: "addbooks",
  data() {
    return {
      bookds: "",
      userid: "",
      textareaValue: "",
      bookinfo: {}
    };
  },
  destroyed() {
     sessionStorage.setItem("textareaValue",this.textareaValue)
  },
  created() {
    var str = localStorage.getItem("userid"); //取回userid
    this.userid = JSON.parse(str);
    this.textareaValue = sessionStorage.getItem("textareaValue")
    this.getParams();
  },
  methods: {
    bookshow() {
      this.bookds = false;
    },
    getParams() {
      if (!this.$route.params.bookinfo) {
        this.bookinfo.title = "边城test";
        this.bookinfo.cover =
          "http://images.bookuu.com/book/C/01661/2656496-fm.jpg";
        this.bookinfo.author = "沈从文";
        this.bookinfo.describ = "一个小城故事";
      }
      if (this.$route.params.type == 1) {
        console.log(this.$route.params);
        this.bookinfo = this.$route.params.bookinfo;
        this.bookinfo.fileId = this.$route.params.bookinfo.bookId;
        this.bookinfo.title = this.$route.params.bookinfo.bookName;
        this.bookinfo.describ = this.$route.params.bookinfo.bookIntroduction;
        this.bookds = this.$route.params.bookds;
      } else if (this.$route.params.type == 2) {
        console.log(this.$route.params);
        this.bookds = this.$route.params.bookds;
        this.bookinfo = this.$route.params.bookinfo;
      }
    },

    addinfo() {
      if (!this.textareaValue.trim()) {
        Toast("请先填写书评，然后发布");
        return;
      } else if (this.bookinfo.title === "边城test") {
        Toast("请先添加书籍，然后发布");
        return;
      }
      const params = new URLSearchParams();
      params.append("userid", this.userid);
      params.append("describe", this.textareaValue);
      params.append("bookname", this.bookinfo.title);
      params.append("fileid", this.bookinfo.fileId);
      params.append("cover", this.bookinfo.cover);
      params.append("bookdescribe", this.bookinfo.describ);
      params.append("author", this.bookinfo.author);
      params.append("type", 1);

      this.$http({
        method: "post",
        url: baseurl.urls + "/bookfriendcircle/addBookFriendCircle",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            Toast("发布成功");
            this.textareaValue = ""
            sessionStorage.removeItem('textareaValue');
            this.$router.push("/discover");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
#addbooks .main textarea {
  outline: none;
  width: -webkit-calc(100% - 10px);
  padding: 5px;
  height: 200px;
  background-color: #f8f8f8;
  border: none;
  resize: none;
}

#addbooks .addbook {
  width: 100%;
  display: flex;
  flex-flow: column;
  font-size: 14px;
  color: #a1a1a1;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 0;
  left: 0;
  padding-left: 15px;
  margin-bottom: 3px;
}

#addbooks .addbook img {
  margin-top: 8px;
}

.club-nav {
  margin: 0 15px;
  display: flex;
  border-radius: 8px;
  padding: 9px;
  box-shadow: darkgrey 1px 1px 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.club-nav-right {
  margin-left: 10px;
  width: 100%;
}

.club-nav-right p:nth-of-type(1) {
  font-size: 15px;
  color: #252525;
  margin-bottom: 14px;
}

.club-nav-right p:nth-of-type(2) {
  font-size: 12px;
  color: #a1a1a1;
  margin-bottom: 11px;
}

.club-nav-right p:nth-of-type(3) {
  font-size: 12px;
  color: #a1a1a1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.club-nav-del {
  margin-top: -15px;
  margin-right: -15px;
}
</style>